<template>
  <div class="content">
    <ul>
      <li @click="maueClick(index)"  v-for="(item,index) in mauelist" :key="index" :class="{active:ssIndex==index}">{{item.name}}</li>
      <!-- <li>待消费</li>
      <li>待评价</li>
      <li>退款</li> -->
    </ul>
    <div class="data">
      <div class="Glist" v-for="(item,index) in datalist" :key="index">
        <div class="list_top">
          <div class="list_top_left">
            <img src="../../../assets/1.jpg" alt="" />
            纯手工饺子（凤城九路店）>
          </div>
          <div class="list_top_right">已送达</div>
        </div>
        <div class="list_center">
          <span>10减3</span>
          <span>10减3</span>
          <span>10减3</span>
        </div>
        <div class="list_content">
          <div class="list_content_left">
            <img src="../../../assets/1.jpg" alt="" />
            <img src="../../../assets/1.jpg" alt="" />
          </div>
          <div class="list_content_right">
            <p>￥17.8</p>
            <p>共2件</p>
          </div>
        </div>
        <div class="list_bottom">
          <button>再来一单</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ssIndex:0,
      datalist: [
        { img:'', name:'纯手工饺子（凤城九路店）>',status:'0',money:'17.8',count:'2'},
        { img:'', name:'纯手工饺子（凤城九路店）>',status:'0',money:'17.8',count:'2'},
        { img:'', name:'纯手工饺子（凤城九路店）>',status:'0',money:'17.8',count:'2'},
      ],
      mauelist:[
        {name:'全部'},
        {name:'待消费'},
        {name:'待评价'},
        {name:'退款'},
      ],
    };
  },
  methods:{
    maueClick(index){
      return this.ssIndex = index
    }
  }
};
</script>

<style scoped>
.content {
  height: 82vh;
  width: 100vw;
  overflow: auto;
}
.content ul {
  width: 100vw;
  display: flex;
  align-items: center;
}
.content ul li {
  line-height: 5vh;
  width: 15vw;
  list-style: none;
  text-align: center;
  margin: 1vh 0.6667vw;
}
.conten ul li.active {
  font-weight: 700;
  border-bottom: 2px solid rgb(0, 183, 255);
}
.content .data {
  height:76vh;
  width: 100vw;
}
.content .data .Glist {
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
  width: 96vw;
  height: 28vh;
  margin: 2vh auto 0;
}
.active{
  font-weight: 700;
  box-sizing: border-box;
  border-bottom: 2px solid rgb(0, 176, 246);
}
.content .data .Glist .list_top {
  width: 89vw;
  margin: 0 auto;
  height: 5vh;
  line-height: 5vh;
  display: flex;
  border-radius: 10px;
  justify-content: space-between;
}
.content .data .Glist .list_top .list_top_left {
  font-weight: 700;
}
.content .data .Glist .list_top .list_top_right {
  color: gainsboro;
  font-size: 14px;
}
.content .data .Glist .list_top .list_top_left img {
  width: 6.6667vw;
  border-radius: 5px;
  vertical-align: middle;
}
.content .data .Glist .list_center {
  display: flex;
  width: 90vw;
  margin: 0 auto;
}
.content .data .Glist .list_center span {
  border-radius: 3px;
  font-size: 12px;
  border: 1px solid orange;
  color: orange;
  margin: 1vw;
}
.content .data .Glist .list_content {
  height: 12vh;
  width: 90vw;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}
.content .data .Glist .list_content .list_content_left {
  height: 12vh;
}
.content .data .Glist .list_content .list_content_right {
  height: 12vh;
  text-align: right;
}
.content .data .Glist .list_content .list_content_right p:nth-child(2) {
  font-size: 12px;
  color: gainsboro;
}
.content .data .Glist .list_content .list_content_left img {
  width: 22vw;
  margin-right: 2vw;
  border-radius: 7px;
}
.content .data .Glist .list_bottom {
  height: 7vh;
  line-height: 7vh;
  display: flex;
  justify-content: flex-end;
  width: 92vw;
  margin: 0 a;
}
.content .data .Glist .list_bottom button {
  width: 20vw;
  height: 4.5vh;
  line-height: 4.5vh;
  border-radius: 25px;
  border: 1px solid rgb(0, 183, 255);
  color: rgb(0, 183, 255);
  background-color: transparent;
}
</style>